<h6 class="info-item-title">Action Executions:</h6>

<span *ngIf="actionExecutions && actionExecutions.length === 0">
  <em>No child executions are associated with this task execution.</em>
</span>

<ngb-accordion [closeOthers]="false" (panelChange)="panelChanged($event)" *ngIf="actionExecutions; else contentLoading">
    <ngb-panel *ngFor="let actionExecution of actionExecutions; let i=index; trackBy: executionTrackBy" [id]="i">

        <ng-template ngbPanelTitle>
            <div class="d-flex align-items-center card-header-content">
                <div class="badge-flex">
                    <div class="badge font-weight-normal" [ngClass]="actionExecution.state">
                        {{actionExecution.state}}
                    </div>
                </div>
                <div class="flex-1 text-ellipsis">{{actionExecution.name}}</div>

            </div>
        </ng-template>
        <ng-template ngbPanelContent>
            <!-- ID -->
            <cf-info-item [prop]="{display: 'ID', value: actionExecution.id, key: 'action-'+i+'-id'}"></cf-info-item>

            <div class="d-flex flex-row">

                <!-- created -->
                <cf-info-item class="flex-1-1-auto" [prop]="{display: 'Created', value: actionExecution.created_at,
                                                             key: 'action-'+i+'-created'}"></cf-info-item>

                <!-- updated -->
                <cf-info-item class="flex-1-1-auto" [prop]="{display: 'Updated', value: actionExecution.updated_at,
                                                             key: 'action-'+i+'-updated'}"></cf-info-item>

            </div>

            <cf-info-item [prop]="{display: 'State Info', value: actionExecution.state_info, renderType: 'code',
                                   key: 'action-'+i+'-state_info'}"></cf-info-item>

            <!-- input -->
            <cf-info-item [prop]="{display: 'Input', value: actionExecution.input, renderType: 'code',
                                                mode: 'json', key: 'action-'+i+'-input'}"></cf-info-item>

            <!-- output -->
            <cf-info-item [prop]="{display: 'Output', value: actionExecution.output, renderType: 'code',
                                                mode: 'json', key: 'action-'+i+'-output'}"></cf-info-item>

        </ng-template>
    </ngb-panel>
</ngb-accordion>

<ng-template #contentLoading>
    <div class="animated-background md"></div>
</ng-template>